GamePage - Code Metrics - Inspection of "Merge branch 'release/2.7.0'" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 3278dc...27a5bd )

by Kevin Van

created 2021-07-11 12:06 UTC

GamePage B

↳ Parent: src/pages/game.js

Complexity

Total Complexity

Size/Duplication

Total Lines	282
Duplicated Lines	0 %

Importance

Changes

Metric	Value
wmc	48
eloc	239
dl	0
loc	282
rs	8.5599
c	0
b	0
f	0

11 Functions

Rating	Name	Size	Complexity
A	renderScore	9	2
B	renderEventLine	58	5
A	renderLineupLine	17	3
A	updateData	11	2
A	renderSubLine	15	3
A	renderLineup	8	1
A	renderEvents	3	1
A	renderScoreWithWinnerIndicator	5	2
A	renderLineupHeader	11	1
A	componentDidMount	3	1
F	render	101	27

How to fix Complexity

import React, { Component, Fragment } from "react"
import LazyLoad from "react-lazy-load"

import { graphql } from "gatsby"

import moment from "moment"
import "moment/locale/nl-be"

import { mapPsdStatus } from "../scripts/helper"

import Layout from "../layouts/index"
import SEO from "../components/seo"
import Icon from "../components/Icon"
import MiniRanking from "../components/MiniRanking"
import Spinner from "../components/Spinner"

import iconBench from "../images/i_bench_2.png"
import iconCardRed from "../images/i_card_red.png"
import iconCardYellowRed from "../images/i_card_yellow_red.png"
import iconCardYellow from "../images/i_card_yellow.png"
import iconGoal from "../images/i_goal.png"
import iconStart from "../images/i_start.png"
import iconSubIn from "../images/i_sub_in.png"
import iconSubOut from "../images/i_sub_out.png"

class GamePage extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    const {
      data: {
        site: {
          siteMetadata: { kcvvPsdApi },
        },
      },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.matchId = this.props.id || null
  }

  updateData() {
    if (this.matchId === null) {
      return
    }

    const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`

    fetch(apiUrl)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))
  }

  componentDidMount() {
    this.updateData()
  }

  render() {
    if (this.matchId === null) {
      return (
        <Layout>
          <section className="grid-container site-content">Geen match beschikbaar...</section>
        </Layout>
      )
    }

    moment.locale(`nl-be`)

    if (this.state.loading === false && this.state.data) {
      const { general = {}, substitutes = {}, lineup = {}, events = [] } = this.state.data
      const homeTeamId = general.homeClub?.id
      const ogImage = {
        src: general?.homeClub?.logo,
        width: 180,
        height: 180,
      }

      const { home: homeLineup = [], away: awayLineup = [] } = lineup || {}
      const { home: homeSubs = [], away: awaySubs = [] } = substitutes || {}

      const matchTime = moment(general.date)

      return (
        <Layout>
          <SEO
            lang="nl-BE"
            title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            path={`/game/${general?.id}`}
            image={ogImage}
          />

          <section className="grid-container game-stats">
            <div className="grid-x grid-margin-x">
              <div className={`cell large-12 center game__details`}>
                <div className="game__teams">
                  <div className={`game__teams-inner`}>
                    <LazyLoad debounce={false}>
                      <img src={general.homeClub?.logo} alt={general.homeClub?.name} title={general.homeClub?.name} />
                    </LazyLoad>
                  </div>
                  {this.renderScore(general.goalsHomeTeam, general.goalsAwayTeam)}
                  <div className={`game__teams-inner`}>
                    <LazyLoad debounce={false}>
                      <img src={general.awayClub?.logo} alt={general.awayClub?.name} title={general.awayClub?.name} />
                    </LazyLoad>
                  </div>
                </div>
                <h1>{`${general.homeClub?.name} - ${general.awayClub?.name}`}</h1>
                <h4>{general.competitionType}</h4>
                <time dateTime={matchTime.format(`YYYY-MM-DD - H:mm`)}>
                  {matchTime.format(`dddd DD MMMM YYYY - H:mm`)}
                </time>
                <br />

                {general.status !== 0 && (
                  <span className={`game__status game__status--${general.status}`}>{mapPsdStatus(general.status)}</span>
                )}

                <br />
              </div>
              {(homeLineup.length !== 0 || awayLineup.length !== 0) && (
                <div className={`lineup__wrapper grid-x grid-margin-x cell large-12`}>
                  <div className={`cell large-6 lineup__wrapper--home`}>
                    <h3>{general.homeClub?.name}</h3>
                    {homeLineup && this.renderLineup(homeLineup, homeSubs)}
                  </div>
                  <div className={`cell large-6 lineup__wrapper--away`}>
                    <h3>{general.awayClub?.name}</h3>
                    {awayLineup && this.renderLineup(awayLineup, awaySubs)}
                  </div>
                </div>
              )}

              {events.length !== 0 && (
                <div className={`cell large-12 event__wrapper`}>
                  <h3>Gebeurtenissen</h3>
                  {events && this.renderEvents(events, homeTeamId)}
                </div>
              )}
            </div>
          </section>

          <MiniRanking
            teamId={general.homeTeamId || general.awayTeamId}
            homeTeam={general.homeClub?.name}
            awayTeam={general.awayClub?.name}
          />
        </Layout>
      )
    } else {
      return (
        <Layout>
          <section className="grid-container site-content">
            <Spinner />
          </section>
        </Layout>
      )
    }
  }

  renderScore = (resultHome, resultAway) => {
    return resultHome !== null && resultAway !== null ? (
      <div className={`match-details__vs match-details__vs--score`}>
        {this.renderScoreWithWinnerIndicator(resultHome, resultAway, `home`)}
        <span className={`match-details__divider`}>&nbsp;-&nbsp;</span>
        {this.renderScoreWithWinnerIndicator(resultAway, resultHome, `away`)}
      </div>
    ) : (
      <div className={`match-details__vs`}>VS</div>
    )
  }

  renderScoreWithWinnerIndicator = (result1, result2, extraClass) => {
    return result1 > result2 ? (
      <span className={`match-details__winner match-details__winner--${extraClass}`}>{result1}</span>
    ) : (
      <span className={`match-details__loser`}>{result1}</span>
    )
  }

  renderEvents(events, homeTeamId) {
    return <Fragment>{events.map((element, i) => this.renderEventLine(i, element, homeTeamId))}</Fragment>
  }

  renderEventLine(i, element, homeTeamId) {
    const homeTeam = element.clubId == homeTeamId
    let actionIcon = null
    let actionMessage = ``
    let actionText = ``

    switch (element.action) {
      case `geel`:
        actionIcon = iconCardYellow
        actionText = `Gele kaart voor`
        actionMessage = `Gele kaart`
        break
      case `rood`:
        actionIcon = iconCardRed
        actionText = `Rode kaart voor`
        actionMessage = `Rode kaart`
        break
      case `tweedegeel`:
        actionIcon = iconCardYellowRed
        actionText = `Tweede gele kaart voor`
        actionMessage = `Tweede gele kaart`
        break
      case `doelpunt`:
        actionIcon = iconGoal
        actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
        actionMessage = `Doelpunt`
        break
    }

    return (
      <div className={`event__row ${homeTeam ? `event__row--home` : `event__row--away`} grid-x grid-margin-x`} key={i}>
        {homeTeam && (
          <span className={`event__row__item event__row__item--home lineup__item--name cell small-10 large-4`}>
            {actionText} {element.playerName}
          </span>
        )}
        {homeTeam && (
          <span
            className={`event__row__item event__row__item--home lineup__item--action cell small-1 center`}
            style={{ backgroundImage: `url(${actionIcon})` }}
            title={actionMessage}
          ></span>
        )}
        <span className={`event__row__item lineup__item--time cell small-1 large-2 center`}>{element.minute}'</span>
        {homeTeam || (
          <span
            className={`event__row__item event__row__item--away lineup__item--action cell small-1 center`}
            style={{ backgroundImage: `url(${actionIcon})` }}
            title={actionMessage}
          ></span>
        )}
        {homeTeam || (
          <span className={`event__row__item event__row__item--away lineup__item--name cell small-10 large-4`}>
            {actionText} {element.playerName}
          </span>
        )}
      </div>
    )
  }
  renderLineup(lineup, substitutes) {
    return (
      <Fragment>
        {this.renderLineupHeader()}
        {lineup.map((element, i) => this.renderLineupLine(i, element))}
        <hr />
        {substitutes.map((element, i) => this.renderSubLine(i, element))}
      </Fragment>
    )
  }

  renderLineupHeader() {
    return (
      <div className={`lineup__header grid-x grid-margin-x`}>
        <span className={`lineup__header__item lineup__item--status cell small-1`}></span>
        <span className={`lineup__header__item lineup__item--number cell small-1`}>#</span>
        <span className={`lineup__header__item lineup__item--name cell small-9`}>Name</span>
        <span className={`lineup__header__item lineup__item--time cell small-1`}>
          <Icon icon="fa-clock-o" />
        </span>
      </div>
    )
  }

  renderSubLine(i, element) {
    return (
      <div className={`lineup__row lineup__row--substitute grid-x grid-margin-x`} key={i}>
        <span
          className={`lineup__row__item lineup__item--status cell small-1`}
          style={{
            backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
          }}
          title={`${element.changed ? `Wisselspeler ingevallen` : `Wisselspeler`}`}
        ></span>
        <span className={`lineup__row__item lineup__item--number cell small-1`}>{element.number}</span>
        <span className={`lineup__row__item lineup__item--name cell small-9`}>{element.playerName}</span>
        <span className={`lineup__row__item lineup__item--time cell small-1`}>{element.minutesPlayed}'</span>
      </div>
    )
  }

  renderLineupLine(i, element) {
    return (
      <div className={`lineup__row lineup__row--lineup grid-x grid-margin-x`} key={i}>
        <span
          className={`lineup__row__item lineup__item--status cell small-1`}
          style={{
            backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`,
          }}
          title={`${element.changed ? `Basisspeler gewisseld` : `Basisspeler`}`}
        ></span>
        <span className={`lineup__row__item lineup__item--number cell small-1`}>{element.number}</span>
        <span className={`lineup__row__item lineup__item--name cell small-9`}>
          {element.playerName} {element.captain && `(C)`}
        </span>
        <span className={`lineup__row__item lineup__item--time cell small-1`}>{element.minutesPlayed}'</span>
      </div>
    )
  }
}

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        kcvvPsdApi
      }
    }
  }
`

export default GamePage


1			import React, { Component, Fragment } from "react"
2			import LazyLoad from "react-lazy-load"
3
4			import { graphql } from "gatsby"
5
6			import moment from "moment"
7			import "moment/locale/nl-be"
8
9			import { mapPsdStatus } from "../scripts/helper"
10
11			import Layout from "../layouts/index"
12			import SEO from "../components/seo"
13			import Icon from "../components/Icon"
14			import MiniRanking from "../components/MiniRanking"
15			import Spinner from "../components/Spinner"
16
17			import iconBench from "../images/i_bench_2.png"
18			import iconCardRed from "../images/i_card_red.png"
19			import iconCardYellowRed from "../images/i_card_yellow_red.png"
20			import iconCardYellow from "../images/i_card_yellow.png"
21			import iconGoal from "../images/i_goal.png"
22			import iconStart from "../images/i_start.png"
23			import iconSubIn from "../images/i_sub_in.png"
24			import iconSubOut from "../images/i_sub_out.png"
25
26			class GamePage extends Component {
27			constructor(props) {
28			super(props)
29
30			this.state = {
31			data: [],
32			loading: true,
33			}
34
35			const {
36			data: {
37			site: {
38			siteMetadata: { kcvvPsdApi },
39			},
40			},
41			} = this.props
42
43			this.kcvvPsdApi = kcvvPsdApi
44			this.matchId = this.props.id \|\| null
45			}
46
47			updateData() {
48			if (this.matchId === null) {
49			return
50			}
51
52			const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`
53
54			fetch(apiUrl)
55			.then((response) => response.json())
56			.then((json) => this.setState({ data: json, loading: false }))
57			}
58
59			componentDidMount() {
60			this.updateData()
61			}
62
63			render() {
64			if (this.matchId === null) {
65			return (
66			<Layout>
67			<section className="grid-container site-content">Geen match beschikbaar...</section>
68			</Layout>
69			)
70			}
71
72			moment.locale(`nl-be`)
73
74			if (this.state.loading === false && this.state.data) {
75			const { general = {}, substitutes = {}, lineup = {}, events = [] } = this.state.data
76			const homeTeamId = general.homeClub?.id
77			const ogImage = {
78			src: general?.homeClub?.logo,
79			width: 180,
80			height: 180,
81			}
82
83			const { home: homeLineup = [], away: awayLineup = [] } = lineup \|\| {}
84			const { home: homeSubs = [], away: awaySubs = [] } = substitutes \|\| {}
85
86			const matchTime = moment(general.date)
87
88			return (
89			<Layout>
90			<SEO
91			lang="nl-BE"
92			title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
93			description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
94			path={`/game/${general?.id}`}
95			image={ogImage}
96			/>
97
98			<section className="grid-container game-stats">
99			<div className="grid-x grid-margin-x">
100			<div className={`cell large-12 center game__details`}>
101			<div className="game__teams">
102			<div className={`game__teams-inner`}>
103			<LazyLoad debounce={false}>
104			<img src={general.homeClub?.logo} alt={general.homeClub?.name} title={general.homeClub?.name} />
105			</LazyLoad>
106			</div>
107			{this.renderScore(general.goalsHomeTeam, general.goalsAwayTeam)}
108			<div className={`game__teams-inner`}>
109			<LazyLoad debounce={false}>
110			<img src={general.awayClub?.logo} alt={general.awayClub?.name} title={general.awayClub?.name} />
111			</LazyLoad>
112			</div>
113			</div>
114			<h1>{`${general.homeClub?.name} - ${general.awayClub?.name}`}</h1>
115			<h4>{general.competitionType}</h4>
116			<time dateTime={matchTime.format(`YYYY-MM-DD - H:mm`)}>
117			{matchTime.format(`dddd DD MMMM YYYY - H:mm`)}
118			</time>
119			<br />
120
121			{general.status !== 0 && (
122			<span className={`game__status game__status--${general.status}`}>{mapPsdStatus(general.status)}</span>
123			)}
124
125			<br />
126			</div>
127			{(homeLineup.length !== 0 \|\| awayLineup.length !== 0) && (
128			<div className={`lineup__wrapper grid-x grid-margin-x cell large-12`}>
129			<div className={`cell large-6 lineup__wrapper--home`}>
130			<h3>{general.homeClub?.name}</h3>
131			{homeLineup && this.renderLineup(homeLineup, homeSubs)}
132			</div>
133			<div className={`cell large-6 lineup__wrapper--away`}>
134			<h3>{general.awayClub?.name}</h3>
135			{awayLineup && this.renderLineup(awayLineup, awaySubs)}
136			</div>
137			</div>
138			)}
139
140			{events.length !== 0 && (
141			<div className={`cell large-12 event__wrapper`}>
142			<h3>Gebeurtenissen</h3>
143			{events && this.renderEvents(events, homeTeamId)}
144			</div>
145			)}
146			</div>
147			</section>
148
149			<MiniRanking
150			teamId={general.homeTeamId \|\| general.awayTeamId}
151			homeTeam={general.homeClub?.name}
152			awayTeam={general.awayClub?.name}
153			/>
154			</Layout>
155			)
156			} else {
157			return (
158			<Layout>
159			<section className="grid-container site-content">
160			<Spinner />
161			</section>
162			</Layout>
163			)
164			}
165			}
166
167			renderScore = (resultHome, resultAway) => {
168			return resultHome !== null && resultAway !== null ? (
169			<div className={`match-details__vs match-details__vs--score`}>
170			{this.renderScoreWithWinnerIndicator(resultHome, resultAway, `home`)}
171			<span className={`match-details__divider`}> - </span>
172			{this.renderScoreWithWinnerIndicator(resultAway, resultHome, `away`)}
173			</div>
174			) : (
175			<div className={`match-details__vs`}>VS</div>
176			)
177			}
178
179			renderScoreWithWinnerIndicator = (result1, result2, extraClass) => {
180			return result1 > result2 ? (
181			<span className={`match-details__winner match-details__winner--${extraClass}`}>{result1}</span>
182			) : (
183			<span className={`match-details__loser`}>{result1}</span>
184			)
185			}
186
187			renderEvents(events, homeTeamId) {
188			return <Fragment>{events.map((element, i) => this.renderEventLine(i, element, homeTeamId))}</Fragment>
189			}
190
191			renderEventLine(i, element, homeTeamId) {
192			const homeTeam = element.clubId == homeTeamId
193			let actionIcon = null
194			let actionMessage = ``
195			let actionText = ``
196
197			switch (element.action) {
198			case `geel`:
199			actionIcon = iconCardYellow
200			actionText = `Gele kaart voor`
201			actionMessage = `Gele kaart`
202			break
203			case `rood`:
204			actionIcon = iconCardRed
205			actionText = `Rode kaart voor`
206			actionMessage = `Rode kaart`
207			break
208			case `tweedegeel`:
209			actionIcon = iconCardYellowRed
210			actionText = `Tweede gele kaart voor`
211			actionMessage = `Tweede gele kaart`
212			break
213			case `doelpunt`:
214			actionIcon = iconGoal
215			actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
216			actionMessage = `Doelpunt`
217			break
218			}
219
220			return (
221			<div className={`event__row ${homeTeam ? `event__row--home` : `event__row--away`} grid-x grid-margin-x`} key={i}>
222			{homeTeam && (
223			<span className={`event__row__item event__row__item--home lineup__item--name cell small-10 large-4`}>
224			{actionText} {element.playerName}
225			</span>
226			)}
227			{homeTeam && (
228			<span
229			className={`event__row__item event__row__item--home lineup__item--action cell small-1 center`}
230			style={{ backgroundImage: `url(${actionIcon})` }}
231			title={actionMessage}
232			></span>
233			)}
234			<span className={`event__row__item lineup__item--time cell small-1 large-2 center`}>{element.minute}'</span>
235			{homeTeam \|\| (
236			<span
237			className={`event__row__item event__row__item--away lineup__item--action cell small-1 center`}
238			style={{ backgroundImage: `url(${actionIcon})` }}
239			title={actionMessage}
240			></span>
241			)}
242			{homeTeam \|\| (
243			<span className={`event__row__item event__row__item--away lineup__item--name cell small-10 large-4`}>
244			{actionText} {element.playerName}
245			</span>
246			)}
247			</div>
248			)
249			}
250			renderLineup(lineup, substitutes) {
251			return (
252			<Fragment>
253			{this.renderLineupHeader()}
254			{lineup.map((element, i) => this.renderLineupLine(i, element))}
255			<hr />
256			{substitutes.map((element, i) => this.renderSubLine(i, element))}
257			</Fragment>
258			)
259			}
260
261			renderLineupHeader() {
262			return (
263			<div className={`lineup__header grid-x grid-margin-x`}>
264			<span className={`lineup__header__item lineup__item--status cell small-1`}></span>
265			<span className={`lineup__header__item lineup__item--number cell small-1`}>#</span>
266			<span className={`lineup__header__item lineup__item--name cell small-9`}>Name</span>
267			<span className={`lineup__header__item lineup__item--time cell small-1`}>
268			<Icon icon="fa-clock-o" />
269			</span>
270			</div>
271			)
272			}
273
274			renderSubLine(i, element) {
275			return (
276			<div className={`lineup__row lineup__row--substitute grid-x grid-margin-x`} key={i}>
277			<span
278			className={`lineup__row__item lineup__item--status cell small-1`}
279			style={{
280			backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
281			}}
282			title={`${element.changed ? `Wisselspeler ingevallen` : `Wisselspeler`}`}
283			></span>
284			<span className={`lineup__row__item lineup__item--number cell small-1`}>{element.number}</span>
285			<span className={`lineup__row__item lineup__item--name cell small-9`}>{element.playerName}</span>
286			<span className={`lineup__row__item lineup__item--time cell small-1`}>{element.minutesPlayed}'</span>
287			</div>
288			)
289			}
290
291			renderLineupLine(i, element) {
292			return (
293			<div className={`lineup__row lineup__row--lineup grid-x grid-margin-x`} key={i}>
294			<span
295			className={`lineup__row__item lineup__item--status cell small-1`}
296			style={{
297			backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`,
298			}}
299			title={`${element.changed ? `Basisspeler gewisseld` : `Basisspeler`}`}
300			></span>
301			<span className={`lineup__row__item lineup__item--number cell small-1`}>{element.number}</span>
302			<span className={`lineup__row__item lineup__item--name cell small-9`}>
303			{element.playerName} {element.captain && `(C)`}
304			</span>
305			<span className={`lineup__row__item lineup__item--time cell small-1`}>{element.minutesPlayed}'</span>
306			</div>
307			)
308			}
309			}
310
311			export const pageQuery = graphql`
312			query {
313			site {
314			siteMetadata {
315			kcvvPsdApi
316			}
317			}
318			}
319			`
320
321			export default GamePage
322

soniCaH / KCVV-Elewijt-Gatsby

Push — master ( 3278dc...27a5bd )

GamePage B

Complexity

Size/Duplication

Importance

11 Functions

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like